---
title: 단계
description: Starlight에서 단계별 가이드를 만들기 위해 작업의 번호가 매겨진 목록에 스타일을 지정하는 방법을 알아보세요.
---

import { Tabs, TabItem, Steps } from '@astrojs/starlight/components';

번호가 매겨진 작업 목록에 스타일을 지정하여 단계별 가이드를 만들려면 `<Steps>` 컴포넌트를 사용하세요.

import Preview from '~/components/component-preview.astro';

<Preview>

<Steps slot="preview">

1. 새 Starlight 프로젝트를 만듭니다:

   <Tabs syncKey="pkg">

   <TabItem label="npm">

   ```sh
   npm create astro@latest -- --template starlight
   ```

   </TabItem>

   <TabItem label="pnpm">

   ```sh
   pnpm create astro --template starlight
   ```

   </TabItem>

   <TabItem label="Yarn">

   ```sh
   yarn create astro --template starlight
   ```

   </TabItem>

   </Tabs>

2. 첫 번째 문서 페이지를 작성합니다.

</Steps>

</Preview>

## 가져오기

```tsx
import { Steps } from '@astrojs/starlight/components';
```

## 사용

`<Steps>` 컴포넌트를 사용하여 번호가 매겨진 작업 목록의 스타일을 지정합니다.
이는 각 단계를 명확하게 강조해야 하는 보다 복잡한 단계별 가이드에 유용합니다.

표준 Markdown 정렬 목록을 `<Steps>`로 묶습니다.
모든 일반적인 Markdown 구문은 `<Steps>` 내에서 적용 가능합니다.

<Preview>

````mdx
import { Steps } from '@astrojs/starlight/components';

<Steps>

1. 컴포넌트를 MDX 파일로 가져옵니다.

   ```js
   import { Steps } from '@astrojs/starlight/components';
   ```

2. 순서가 매겨진 목록 항목을 `<Steps>`로 묶습니다.

</Steps>
````

<Fragment slot="markdoc">

````markdoc
{% steps %}

1. 컴포넌트를 MDX 파일로 가져옵니다.

   ```js
   import { Steps } from '@astrojs/starlight/components';
   ```

2. 순서가 매겨진 목록 항목을 `<Steps>`로 묶습니다.

{% /steps %}
````

</Fragment>

<Steps slot="preview">

1. 컴포넌트를 MDX 파일로 가져옵니다.

   ```js
   import { Steps } from '@astrojs/starlight/components';
   ```

2. 순서가 매겨진 목록 항목을 `<Steps>`로 묶습니다.

</Steps>

</Preview>

## `<Steps>` 속성

**구현:** [`Steps.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/user-components/Steps.astro)

`<Steps>` 컴포넌트는 어떤 속성도 허용하지 않습니다.
